<!DOCTYPE html>
<html>

<head>
    <meta charset="utf8">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font-family: Microsoft YaHei;
    }
    ul {
        list-style: none;
    }
    #main {
        text-align: center;
        padding: 50px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        height: 360px;
    }
    .btn {
        background: #66b1ff;
        color: #fff;
        font-size: 18px;
        padding: 5px 10px;
        border-radius: 5px;
        border: none;
        outline: none;
        cursor: pointer;
        margin-right: 20px;
        margin-left: 20px;
    }
    .btn.danger {
        background-color: #f56c6c;
        font-size: 18px;
        color: #fff;
    }
    .btn.is-disabled {
        background-color: #a0cfff;
        cursor: not-allowed;
    }
    .btn.danger.is-disabled {
        background-color: #fab6b6;
    }
    .img-style {
        border-radius: 100%;
        width: 180px;
        height: 180px;
        margin: 0 auto 10px;
        border: 1px solid #ccc;
    }
    .img-style>img{
        width: 180px;
        height: 180px;
        border-radius: 100%;
    }
    .userName {
        color: #f34b4b;
        font-size: 20px;
        font-weight: bold;
        padding-bottom: 10px;
        display: block;
    }
    .userNumber {
        color: #000;
        font-size: 20px;
        font-weight: bold;
        padding-bottom: 10px;
        display: block;
    }
    </style>
</head>

<body>
    <div id="main">
        <div>
            <div class="img-style">
               <img src=""/>
             </div>
            <p>
                <span class="userName"></span>
                <span class="userNumber"></span>
            </p>
        </div>
        <div>
            <button onclick="startIt()" class="btn">开始</button>
            <button onclick="stopIt()" class="btn danger">暂停</button>
        </div>
    </div>
    <script src="./js/index.js"></script>
    <script>
        /* TODO 待补充startIt和stopIt函数里面的代码实现满足以下要求：
                1. 当点击开始按钮时，从给定的index.js文件里面每60毫秒随机获取一个学生，
                    并且将学生的姓名（Name）信息展示在class="userName"标签里，
                    将学生的学号（Number）信息展示在class="userNumber"标签里，
                    将学生的头像（ImgUrl）信息展示在img标签。
                2. 当点击暂停时展示随机得到的学生。
                3. 需要考虑如果用户多次点击开始按钮，无法停止的情况如何解决
            */
        let stus=userList.datas;
        let timer;
        let startIt=()=>{
            if(!timer){
                timer=setInterval(()=>{
                    let floor=Math.floor(Math.random()*52)
                    let stu=stus[floor]
                    document.querySelector("img").src=stu.ImgUrl;
                    document.querySelector(".userName").innerHTML=stu.Name
                    document.querySelector(".userNumber").innerHTML=stu.Number
                },60);
            }
        }
        let stopIt=()=>{
            if(timer){
                clearInterval(timer);
                timer=undefined;
            }
        }
    </script>
</body>

</html>